@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;
@use "sass:list";

@include ns.b(progress) using ($b) {
  $cssVars: (
    progressColor: fun.getCssVarValue(primary-backgroundColor),
    progressBackgroundColor: fun.getCssVarValue(primary-strokeColor),
    stripedColor: rgba($color: #000, $alpha: 0.1),
    progressHeight: 16rpx,
    textGap: 8rpx,
    transition: 0.3s linear,
  );
  @each $key, $value in $cssVars {
    #{fun.getCssVarName($b, $key)}: #{$value};
  }
  
  display: flex;
  align-items: center;
  position: relative;

  &::before,
  &::after {
    display: none;
  }

  @include ns.e(text) using ($e) {
    display: none;
  }

  @include ns.e(progress) using ($e) {
    position: relative;
    border-radius: 100rpx;
    height: fun.getCssVarValue($b, progressHeight);
    flex: auto;
    background: fun.getCssVarValue($b, progressBackgroundColor);

    &-color {
      position: relative;
      border-radius: inherit;
      width: calc(fun.getCssVarValue($b, percentage) * 1%);
      max-width: 100%;
      height: 100%;
      background: fun.getCssVarValue($b, progressColor);
      transition: fun.getCssVarValue($b, transition);
    }
  }

  &.show-text {
    $fs: #{calc(fun.getCssVarValue($b, progressHeight) * 0.9)};

    &::before,
    &::after {
      font-size: $fs;
      line-height: $fs;
      margin: 0 fun.getCssVarValue($b, textGap);
    }

    &::before {
      content: attr(data-current);
      margin-left: 0;
    }

    &::after {
      content: attr(data-total);
      margin-right: 0;
    }

    @include ns.b($b) using ($b) {
      @include ns.e(text) using ($e) {
        display: flex;
        align-items: center;
        position: absolute;
        font-size: $fs;
        line-height: $fs;
        width: 100%;

        &-percentage {
          display: none;
        }
      }
    }
  }

  &.show-percentage {
    @include ns.b($b) using ($b) {
      @include ns.e(text) using ($e) {
        & > :nth-child(n) {
          display: none;
        }
        @include ns.b($b) using ($b) {
          @include ns.e(text-percentage) using ($e) {
            display: block;
          }
        }
      }
    }
  }

  $direction: top bottom center;
  @each $d in $direction {
    @include ns.r($d) using ($r) {
      @include ns.b($b) using ($b) {
        @include ns.e(text) using ($e) {
          justify-content: center;
          @if $d != center {
            #{$d}: #{calc(100% + fun.getCssVarValue(textGap))};
          }
        }
      }
    }
  }

  @include ns.r(x) using ($r) {
    &.show-text {
      &::before,
      &::after {
        display: block;
      }

      @include ns.b($b) using ($b) {
        @include ns.e(text) using ($e) {
          display: none;
        }
      }
    }
  }

  @include ns.s(striped) using ($s) {
    @include ns.b($b) using ($b) {
      @include ns.e(progress) using ($e) {
        &-striped {
          $striped-color: #{fun.getCssVarValue($b, stripedColor)};
          position: absolute;
          @include mixin.locate();
          border-radius: inherit;
          $count: 3;
          $list: ();
          $o: 0;
          $gap: calc(100% / ($count * 2));

          @for $i from 1 through $count {
            $list: list.append($list, $striped-color ($i - 1 + $o) * $gap ($i + $o) * $gap, comma);
            $list: list.append($list, transparent ($i + $o) * $gap ($i + 1 + $o) * $gap, comma);
            $o: $o + 1;
          }

          background: linear-gradient(117deg, $list);
          background-size: fun.getCssVarValue($b, progressHeight) fun.getCssVarValue($b, progressHeight);
          background-position: 0 0;
        }
      }
    }
  }

  @include ns.s(striped-flow) using ($s) {
    @include ns.b($b) using ($b) {
      @include ns.e(progress) using ($e) {
        &-striped {
          @keyframes move {
            0% {
              background-position-x: 0%;
            }

            100% {
              background-position-x: 100%;
            }
          }

          animation: move #{calc(fun.getCssVarValue($b, percentage) * 100ms)} linear infinite;
        }
      }
    }
  }
}
